 
 
 //全选反选**********************************
 function check(){

//全选
var allCheck = document.querySelector('#j_cbAll');
//子选中框伪数组
var childCheck = document.querySelectorAll('#j_tb input');


//全选点击状态和子按键状态相同
allCheck.onclick = function() {
        //全选的状态
        var allState = allCheck.checked;
        //遍历子按键
        childCheck.forEach(function(ele) {
            //子按键状态和全选相等
            ele.checked = allState;
        })
    }
    //给每个子按键绑定点击事件
childCheck.forEach(function(ele) {
    ele.onclick = childOnclick;
})


function childOnclick() {

    //每个子按键的状态
    var childState = this.checked;

    //如果有一个子按键的状态为false,全选按键为false
    if (!childState) {
        allCheck.checked = false;
    }
    //每一个子按键的状态,为falas的时候返回值
    var childOneState = Array.from(childCheck).find(function(ele) {
            //寻找没被选中的元素
            return !ele.checked;
        })
        //如果子按键状态都为ture,全选按钮为ture
    if (!childOneState) {
        allCheck.checked = true;
    }
}

//获取反选按钮的节点
var btn = document.querySelector('#btn');
btn.onclick = function() {
    //点击反选全选按钮状态取反
    allCheck.checked = !allCheck.checked;

    //遍历每个子按键,状态取反
    childCheck.forEach(function(ele) {
        ele.checked = !ele.checked;
    })

    //调用一次子按键点击事件
    childOnclick()
}


 }
 

 //全选反选*********************************


 


//加入购物车列表

class shopping{
    //获取列表节点
    shoptbody=document.querySelector('#j_tb');
    http='http://localhost:3000';

    zanwu=document.querySelector('#zanwu');
    constructor(){

        // console.log(this.shoptbody);

        this.html();
        
        

    }

    //将内容加入列表函数

  async  html(){
        // console.log(11);
        let {data,status}= await axios.get(this.http+'/'+'shopping');
        // console.log(data,status);

        if(status==200){
            if(data.length!=0){

            this.zanwu.style.display='none';

            }

            //遍历数据添加
            data.forEach((i,k)=>{

                // console.log(i.src);
                this.shoptbody.innerHTML+=`
            
                <tr  style="border-bottom: 1px solid rgb(255, 204, 109);" id="${i.id}" class="trtr">
                <td>
                    <input type="checkbox">
                </td>
                <td style="height: 130px;">
                    <div style="display: flex;">
    
                    
                        <div style="background: #f4f4f4;height: 100px;width: 100px;">
                            <img src="${i.src}" alt="" style="width: 100px;">
                        </div>
                        
                        <div style="margin-top: 20px;">
                            <p>${i.title}</p>
                            <p style="color: #b8b3b3;">规格${i.math}</p>
    
                        </div>
    
    
                    </div>
                </td>
                <td >￥<span class="danjia">${i.many}</span></td>
                <td>
                    <div>
                        
                        <span style="display: inline-block;border-radius: 3px;width: 140px; ">
        
        
                            <button style="width: 26px;height: 26px; border: none; " class="jian">-</button>
                        
                            <input type="text" value="1 " style="height: 26px;width: 50px;border: none;outline: none;text-align: center; " class="mathinput">
        
        
                            <button style="width: 26px;height: 26px; border: none; " class="jia">+</button>
        
                        </span>
        
        
                    </div>
    
    
                </td>
                <td >￥<span class="xiaoji">${i.many}</span></td>
                <td ><button type="button" class="btn btn-danger del">删除</button></td>
                </tr>
                
                `;

                
                check();




            })

            new  mathjj();


              //获取span删除键
         let del = document.querySelectorAll('.del');

        //  console.log(del);
         //给删除键绑定点击事件
         del.forEach((ele) => {
 
             ele.onclick = function(eve) {
                 // console.log(11);
             let delparent = eve.target.parentNode.parentNode;

                //  console.log(delparent.id);

                axios.delete('http://localhost:3000'+'/'+'shopping'+'/'+delparent.id).then(()=>{

                    delparent.remove();
                    location.reload();

                })

             }
 
         })

            //当服务器正常的时候正常数量加减
        }



    }

   



};

new shopping;


//数量加减

class mathjj {
    jian = document.querySelectorAll('.jian');
    jia = document.querySelectorAll('.jia');
    mathinput = document.querySelectorAll('.mathinput');

    //获取单价节点
    // danjia=document.querySelectorAll('.danjia');

    // //获取小计节点
    // xiaoji=document.querySelectorAll('.xiaoji');
    
    constructor() {

        this.jian.forEach((i)=>{
            i.onclick = this.jianclick.bind(this);

        })
        this.jia.forEach((i)=>{
            i.onclick = this.jiaclick.bind(this);
        })
        this.mathinput.forEach((i)=>{

            i.oninput = this.inputon;


        })

        this.rental();

        
    }
    inputon() {
         //让小计实时变化
        // console.log(this);
        let danjia=this.parentNode.parentNode.parentNode.previousElementSibling.firstElementChild;

        let xiaoji=this.parentNode.parentNode.parentNode.nextElementSibling.firstElementChild;
        // console.log(danjia,xiaoji);
        // let  yingfu=document.querySelector('.yingfu')

         xiaoji.innerHTML=(parseFloat(danjia.innerHTML)*(+this.value)).toFixed(1);
       
    //    yingfu.innerHTML=(((+yingfu.innerHTML)-parseFloat(danjia.innerHTML))+(((parseFloat(danjia.innerHTML)*(+this.value)).toFixed(1))-0)).toFixed(1);

    }

    jianclick(eve) {
        //单价==父级的父级的父级的上一个兄弟节点的儿子节点
        //eve.target.parentNode.parentNode.parentNode.previousElementSibling;
        //  console.log(eve.target.parentNode.parentNode.parentNode.previousElementSibling.firstElementChild);
        // console.log(eve.target.parentNode.parentNode.parentNode.nextElementSibling);
       
        // this.inputon();
        let danjia=eve.target.parentNode.parentNode.parentNode.previousElementSibling.firstElementChild;

        let xiaoji=eve.target.parentNode.parentNode.parentNode.nextElementSibling;
     
        if (+eve.target.nextElementSibling.value > 1) {
            eve.target.nextElementSibling.value--;
            this.yingfu.innerHTML=((+this.yingfu.innerHTML)-(((parseFloat(danjia.innerHTML)*(+eve.target.nextElementSibling.value)).toFixed(1))-0)).toFixed(1);

        }
       
        xiaoji.innerHTML='￥'+(parseFloat(danjia.innerHTML)*(+eve.target.nextElementSibling.value)).toFixed(1);
        // console.log(this.yingfu.innerHTML-0);
       

            console.log(this.yingfu.innerHTML);

    }
    jiaclick(eve) {
        
        eve.target.previousElementSibling.value++;

        let danjia2=eve.target.parentNode.parentNode.parentNode.previousElementSibling.firstElementChild;

        let xiaoji2=eve.target.parentNode.parentNode.parentNode.nextElementSibling;
        // // console.log(eve.target.previousElementSibling);

        xiaoji2.innerHTML='￥'+(parseFloat(danjia2.innerHTML)*(+eve.target.previousElementSibling.value)).toFixed(1);
        
        
        // this.yingfu.innerHTML=(((+this.yingfu.innerHTML)-parseFloat(danjia2.innerHTML))+(((parseFloat(danjia2.innerHTML)*(+eve.target.previousElementSibling.value)).toFixed(1))-0)).toFixed(1);
        this.yingfu.innerHTML=(((+this.yingfu.innerHTML)-parseFloat(danjia2.innerHTML))+(((parseFloat(danjia2.innerHTML)*(+eve.target.previousElementSibling.value)).toFixed(1))-0)).toFixed(1);
       
        
    }


    //应付总额内容
    rental(){
        
        let xiaoji=document.querySelectorAll('.xiaoji')
        // console.log(xiaoji.innerHTML);
        this.yingfu=document.querySelector('.yingfu')
         let cont2=0;
        xiaoji.forEach((i,k)=>{
            cont2++;
            // console.log(+i.innerHTML,cont2);
            this.yingfu.innerHTML=((cont2*(+i.innerHTML)).toFixed(1));
        })
       
        
      
    }

}



//*********************** */

//滚动
class cartoon {
    every = document.querySelector('.every2');
    every2lang = document.querySelectorAll('.new1child').length;
    btnleft = document.querySelector('.btnleft');
    btnright = document.querySelector('.btnright');
    constructor() {

        localStorage.setItem('login',1)
        this.Interout();
        this.every.onmouseover = this.everyover.bind(this);
        this.every.onmouseout = this.everyout.bind(this);
        this.btnleft.onclick = this.leftclick.bind(this);
        this.btnright.onclick = this.rightclick.bind(this);
    }

    //定时器
    Interout() {
        let left = 0;
        let time;
        let cont = 0;
        // console.log(parseInt(this.every.style.left));
        this.info = false;

        time = setInterval(() => {
            this.every.style.transition = 'all 1s';

            if (this.info) {

                return;
            }
            cont++;
            left -= 1060;

            this.every.style.left = left + 'px';
            // console.log(left);

            if (cont == (this.every2lang - 12)) {

                cont = 0;
                left = 0;
                this.every.style.transition = 'none';
                this.every.style.left = 0;
            }



        }, 3000)



    }
    everyover(time) {
        this.info = true;

    }
    everyout() {

        this.info = false;
    }
    leftclick() {
        // this.every.style.left
        this.info = true;

        if (parseInt(this.every.style.left) < 0) {

            this.every.style.left = (parseInt(this.every.style.left) + 1040) + 'px'


        }


    }
    rightclick() {

        this.info = true;
        if (parseInt(this.every.style.left) > (this.every2lang - 13) * (-1040)) {

            this.every.style.left = (parseInt(this.every.style.left) - 1040) + 'px'
        }

    }


}
new cartoon();

